<template>
  <div class="detail-box">
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="container">
      <van-row class="top">
        <van-col span="6" class="top-img">
          <img :src="appInfo.logo">
        </van-col>
        <van-col offset="1" span="17" class="top-right">
          <p class="top-title">{{ appInfo.name }}</p>
          <!-- <div class="top-right-container">
            <div class="top-right-item">
              <p class="item-top">14400</p>
              <p class="item-bottom">下载</p>
            </div>
            <div class="top-right-item">
              <p class="item-top">4.8</p>
              <p class="item-bottom">客户评分</p>
            </div>
            <div class="top-right-item">
              <p class="item-top">{{ appInfo.android_size }}</p>
              <p class="item-bottom">应用大小</p>
            </div>
          </div> -->
        </van-col>
      </van-row>

      <van-tabs
        v-model="active"
        :line-width="30"
        color="blue"
        class="img-tabs"
      >
        <van-tab title="简介" class="tab-intro">
          <img
            v-for="(items, index) in imgs" :key="items"
            :src="items"
            :data-index="index"
            @click="clickPreivewImg"
          >
        </van-tab>
      </van-tabs>
    </div>

    <!-- <div class="app-desc">
      <p class="app-desc-title">应用描述</p>
      <p class="app-desc-content">应用描述应用描述应用描述应用描述应用描述应用描述应用描述应用描述应用描述应用描述应用描述应用描述应用描述</p>
    </div> -->
    <van-collapse v-model="activeNames" class="app-desc">
      <van-collapse-item name="1" class="app-desc-content">
        <div slot="title" class="app-desc-title">应用描述</div>
        <span v-html="appInfo.desc">{{ appInfo.desc }}</span>
      </van-collapse-item>
    </van-collapse>

    <van-button
      size="large"
      class="download-btn"
      @click.stop="downLoadApk(appInfo.ios_url, appInfo.android_url)"
    >下载</van-button>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  data () {
    return {
      activeNames: ['1'],
      active: 0,
      appInfo: {},
      imgs: []
    }
  },
  mounted() {
    // 应用的详情
    this.appInfo = JSON.parse(sessionStorage.getItem("appInfo"))
    for(let i = 0; i < 8; i ++) {
      let imgUrl = this.appInfo[`img${i}`]
      if(imgUrl) {
        this.imgs.push(imgUrl)
      }
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    clickPreivewImg(e) {
      let index = parseInt(e.target.dataset.index)
      ImagePreview({
        images: this.imgs,
        startPosition: index,
      });
    },
    downLoadApk(iosUrl, androidUrl) {
      if(this.andOrIos()) { //android
      	if(sessionStorage.getItem("usermessage")){
        	window.open(androidUrl)
      	}else{
      		this.$router.push("/login")
  			}
      }else{
        if(sessionStorage.getItem("usermessage")){
        	window.open(iosUrl)
      	}else{
      		this.$router.push("/login")
  			}
      }
    },
    andOrIos() {
      let u = navigator.userAgent;
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      return isAndroid
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  margin: 0;
  font-size: 14px;
}
.detail-box {
  height: 100%;
  overflow: auto;
  padding-bottom: 50px;
}
.container {
  padding: 10px;
}
.container .top {
}
.top-img {
  /*width: 80px;*/
  /*height: 80px;*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-img img {
  width: 80px;
  height: 80px;
  border-radius: 15px;
}
.top-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 80px;
}
.top-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.top-right-container {
  display: flex;
  justify-content: space-between;
}
.top-right-item {
  display: inline-block;
  text-align: center;
}
.item-top {
  font-size: 16px;
  font-weight: bold;
}
.item-bottom {
  font-size: 12px;
  color: #777;
}
.img-tabs {
  margin-top: 10px;
}
.tab-intro {
  padding: 10px 0 0 0 ;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.tab-intro img {
  width: 100px;
  height: 200px;
  border-radius: 10px;
  margin-right: 10px;
}
.app-desc {
  /*margin-top: 20px;*/
}
.app-desc-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
}
.app-desc-content {
  font-size: 12px;
}
.download-btn {
  position: fixed;
  bottom: 0;
  background-color: #529ec2;
  color: #fff;
}
</style>
